import SVGLeft from '@mdi/svg/svg/chevron-left.svg';
import { Button, Icon, NavBar, NavView, vars } from '../imports';
import { bar } from '../style.css';

export function NavViewPage() {
	let navi: NavView;
	function NewPage() {
		const id = Math.floor(Math.random() * 1000);
		return (
			<>
				<NavBar
					title={`新窗口${id}`}
					leftButtons={
						<Button onClick={() => navi.pop()} style={{ border: 'none' }}>
							<Icon svg={SVGLeft} size="2em" />
							返回
						</Button>
					}
				/>
				<div
					style={{
						fontSize: '3em',
						flex: '1',
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'center',
					}}
				>
					Page: {id}
				</div>
			</>
		);
	}
	return (
		<>
			<h2>窗口导航</h2>
			<NavView
				keepLastPage={true}
				ref={(elem) => (navi = elem)}
				style={{ border: `1px solid ${vars.color.border}`, height: '300px' }}
			>
				<div
					style={{
						fontSize: '3em',
						flex: '1',
						display: 'flex',
						alignItems: 'center',
						justifyContent: 'center',
					}}
				>
					一些背景内容
				</div>
			</NavView>
			<div class={bar}>
				<Button
					textContent="压入新窗口"
					onClick={() => {
						navi.push(NewPage());
					}}
				/>
				<Button
					textContent="弹出顶层窗口"
					onClick={() => {
						navi.pop();
					}}
				/>
				<Button
					textContent="弹出所有窗口"
					onClick={() => {
						navi.pop(0);
					}}
				/>
				<Button
					textContent="压入新窗口替换所有窗口"
					onClick={() => {
						navi.push(NewPage(), 0);
					}}
				/>
				<Button
					textContent="插入新窗口到最下方"
					onClick={() => {
						navi.add(NewPage(), 0);
					}}
				/>
				<Button
					textContent="插入新窗口到最上方"
					onClick={() => {
						navi.add(NewPage());
					}}
				/>
			</div>
		</>
	);
}
